<template>
  <nav>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/solution">Solution</router-link></li>
      <li><router-link to="/product-center">Product Center</router-link></li>
      <li><router-link to="/training-center">Training Center</router-link></li>
      <li><router-link to="/recent-activities">Recent Activities</router-link></li>
      <li><router-link to="/media-center">Media Center</router-link></li>
      <li><router-link to="/about-us">About Us</router-link></li>
      <li><router-link to="/careers">Careers</router-link></li>
      <li><router-link to="/contact-us">Contact Us</router-link></li>
      <li><router-link to="/stores">Stores</router-link></li>
      <li><router-link to="/member-center">Member Center</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Navigation'
};
</script>

<style scoped>
nav {
  background-color: #f8f9fa;
  padding: 1rem;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
}

li {
  display: inline;
}

a {
  text-decoration: none;
  color: #007bff;
}

a:hover {
  text-decoration: underline;
}
</style>
